<template>
  <div class="p-designer">
    <viewport class="p-designer-view"/>
    <div class="p-designer-tool">
      <el-scrollbar class="p-designer-tool_con">
        <panel class="control-panel"/>
      </el-scrollbar>
      <div class="p-designer-tool_bar">
        <el-button size="mini" type="success" @click="saveTemp">保存</el-button>
        <el-button size="mini" type="primary" @click="previewTemp">预览</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Viewport from './viewport/index'
import Panel from './panel/index'
import widgets from './widgets'
import Vue from 'vue'

export default {
  name: 'print-designer',
  components: { Viewport, Panel },
  props: {
    widgetOptions: {
      type: Array,
      default: () => [
        { type: 'braid-txt', title: '静态文本', value: '静态文本', defaultValue: '静态文本' },
        { type: 'braid-txt', title: '动态文本', value: '', defaultValue: '动态文本', dynamic: true }
      ]
    },
    tempValue: {
      type: Object,
      default: () => ({ title: 'demo', width: 750, height: 550, pageWidth: 750, pageHeight: 550, tempItems: [] })
    }
  },
  created() {
    Vue.use(widgets)

    // 设置模板组件默认属性
    this.$store.commit('printTemplate/setWidgetSetting', widgets.getWidgetsSetting())
    // 初始化设计器
    this.$store.dispatch('printTemplate/designerInit', {
      tempValue: this.tempValue, // deepClone
      options: this.widgetOptions // deepClone
    })
  },
  methods: {
    // 保存模板
    saveTemp() {
      let page = this.$store.state.printTemplate.page
      this.$emit('save', page) // deepClone
    },
    // 预览模板
    previewTemp() {
      let page = { ...this.$store.state.printTemplate.page }
      this.$lodop.previewTemp(page) // deepClone
    }
  }
}
</script>

<style lang="scss">
body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  box-sizing: border-box;
}

.p-designer {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 100%;
  height: 100%;
  text-align: left;
  display: flex;
  flex-direction: row;

  .p-designer-view {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .p-designer-tool {
    width: 420px;
    height: 100%;
    display: flex;
    flex-direction: column;

    .el-scrollbar__wrap {
      overflow: auto;
    }

    &_con {
      flex: 1;
      height: calc(100vh - 120px);
      //height: 100%;
      width: 100%;
      overflow: hidden;
    }

    &_bar {
      padding: 10px;
      text-align: center;
    }
  }
}

.p-form {
  .el-form-item--mini.el-form-item {
    margin-bottom: 10px;
  }

  .min-input {
    width: 100px;
  }

  .unit-text {
    font-size: 12px;
    color: #999999;
    margin-left: 5px;
  }
}

.p-collapse {
  color: #555555;
  width: 400px;

  .el-collapse-item__header {
    box-sizing: border-box;
    padding-left: 10px;
  }

  .el-collapse-item__content {
    box-sizing: border-box;
    padding: 10px;
  }
}

.widgets {
  outline: none;
  font-size: 12px;

  &:hover {
    outline: 1px solid #ddd !important;
  }

  &.active {
    outline: 1px solid #2196f3 !important;

    &:hover {
      outline: 1px solid #2196f3 !important;
    }
  }
}
</style>
